<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<title>数据分析</title>
		<meta charset="UTF-8"/>
		<link rel="stylesheet" href="/css/bootstrap.min.css">
		<link rel="stylesheet" href="/css/font-awesome.min.css">
	</head>
	<body>
		<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top shadow">
			<a class="navbar-brand" href="#">
				<img src="/img/logo.png" height="30" class="d-inline-block align-top" alt="">
				Mall电商运营平台
			</a>
			<ul class="navbar-nav mr-auto">
				<li class="nav-item">
					<a class="nav-link active" href="/product/DataView">数据看板</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="/product/List">商品维护</a>
				</li>
				
				<li class="nav-item">
					<a class="nav-link" href="/user/List">会员管理</a>
				</li>
			</ul>
			<span class="navbar-text"><a class="nav-link " th:href="@{/adminInfo(name=${userName})}"><i class="fa fa-user"></i>个人中心[<span th:text="${userName}"></span>]</a></span>
		</nav>
		<div class="container-fluid" style="margin-top: 100px;">
			<!-- 小插件 天气和播放器-->
			<div class="row">
				<div class="col-md-1"></div>
				<div class="col-md-5 text-left">
					<div class="card shadow h-100">
						<div class="card-header bg-light text-center">天气预报</div>
						<div class="card-body text-center">
							<iframe allowtransparency="true" frameborder="0" width="565" height="98" scrolling="no" src="//tianqi.2345.com/plugin/widget/index.htm?s=2&z=3&t=1&v=0&d=3&bd=0&k=&f=&ltf=009944&htf=cc0000&q=1&e=1&a=1&c=54511&w=565&h=98&align=center"></iframe>
						</div>
					</div>
				</div>
				<div class="col-md-5 text-right">
					<div class="card shadow h-100">
					<div class="card-header bg-light text-center">音乐放松一下</div>
					<div class="card-body text-center">
						<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=2148433153&auto=0&height=66"></iframe>
<!--						<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=450 src="//music.163.com/outchain/player?type=4&id=961440256&auto=1&height=430"></iframe>-->
					</div>
					</div>
				</div>
				<div class="col-md-1"></div>
			</div>
			<!-- 用户人数  商品数  总销售量 总销售额  -->
			<div class="row" style="margin-top: 20px;">
				<div class="col-md-1"></div>
				<div class="col-md-2">
					<div class="card">
						<div class="card-body text-center">
							<h1 id="userCount"></h1>
						</div>
						<div class="card-footer bg-light text-center">注册会员数</div>
					</div>
				</div>
				<div class="col-md-2">
					<div class="card">
						<div class="card-body text-center">
							<h1 id="productCount"></h1>
						</div>
						<div class="card-footer bg-light text-center">平台商品数</div>
					</div>
				</div>
				<div class="col-md-2">
					<div class="card">
						<div class="card-body text-center">
							<h1 id="productSum"></h1>
						</div>
						<div class="card-footer bg-light text-center">商品销售总量</div>
					</div>
				</div>
				<div class="col-md-2">
					<div class="card">
						<div class="card-body text-center">
							<h1 id="money"></h1>
						</div>
						<div class="card-footer bg-light text-center">平台销售总额(W)</div>
					</div>
				</div>
				<div class="col-md-2">
					<div class="card">
						<div class="card-body text-center">
							<h1 id="vipCount"></h1>
						</div>
						<div class="card-footer bg-light text-center">实时在线会员数</div>
					</div>
				</div>
				<div class="col-md-1"></div>
			</div>
			<!-- 看板 -->
			<div class="row" style="margin-top: 20px;">
				<div class="col-md-1"></div>
				<div class="col-md-10">
					<div class="row">
						<div class="col-md-6">
							<div class="card">
								<div class="card-header bg-light text-center">
									商品访问占比分析
								</div>
								<div class="card-body">
									<div class="ibox float-e-margins">
										<div class="ibox-title">
											<h5><span style="font-size: 16px;" class="label label-success">商品访问量占比</span></h5>
										</div>
										<div class="ibox-content">
											<div class="echarts" id="userPie" style="height: 300px;"></div>
										</div>
									</div>
								</div>
							</div>
						</div>
<!--						柱状图-->
						<div class="col-md-6">
							<div class="card">
								<div class="card-header bg-light text-center">
									热卖商品分析
								</div>
								<div class="card-body">
									<div class="ibox-title">
										<h5><span style="font-size: 16px;" class="label label-success">热点商品Top5</span></h5>
									</div>
									<div class="ibox-content">
										<div class="echarts" id="coursesBar" style="height: 300px;"></div>
									</div>
								</div>
							</div>
						</div>
<!--						柱状图结束-->

					</div>
				</div>
				<div class="col-md-1"></div>
			</div>
			<!-- 看板 -->
			<div class="row" style="margin-top: 20px;">
				<div class="col-md-1"></div>
				<div class="col-md-10">
					<div class="row">
						<div class="col-md-6">
							<div class="card">
								<div class="card-header bg-light text-center">
									热卖商品实时排行榜
								</div>
								<div class="card-body">
									<table class="table table-condensed table-hover table-sm">
										<thead>
											<tr>
												<th>排名</th>
												<th>商品</th>
												<th>价格</th>
												<th>销售量</th>
												<th>详情</th>
											</tr>
										</thead>
										<tbody>
										<tr th:each="productItem : ${salesProductItemList}">
											<input type="hidden" name="id" th:value="${productItem.id}">
											<td th:text="${productItem.rank}"/>
											<td th:text="${productItem.productName}"/>
											<td th:text="${productItem.price}"/>
											<td th:text="${productItem.totalQuantity}"/>
											<td><a class="btn btn-outline-success btn-sm" href="#" th:href="@{/Pinfo(id=${productItem.id})}"><i class="fa fa-info"></i>查看</a></td>
										</tr>
										</tbody>
									</table>
								</div>
							</div>
						</div>
						<div class="col-md-6">
							<div class="card">
								<div class="card-header bg-light text-center">待补货商品</div>
								<div class="card-body">
									<table class="table table-condensed table-hover table-sm">
										<thead>
											<tr>
												<th>排名</th>
												<th>商品</th>
												<th>价格</th>
												<th>库存</th>
												<th>详情</th>
											</tr>
										</thead>
										<tbody>
										<tr th:each="productItem : ${stockProductItemList}">
											<input type="hidden" name="id" th:value="${productItem.id}">
											<input type="hidden" name="id" th:value="${productItem.id}">
											<td th:text="${productItem.rank}"/>
											<td th:text="${productItem.productName}"/>
											<td th:text="${productItem.price}"/>
											<td th:text="${productItem.stock}"/>
											<td><a class="btn btn-outline-warning btn-sm" href="#" th:href="@{/Pinfo(id=${productItem.id})}"><i class="fa fa-info"></i>查看</a></td>
											</tr>
										</tbody>
									</table>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="col-md-1"></div>
			</div>
			
		</div>
	</body>
	<script src="/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="/js/echarts.min.js"></script><br />

	<script>
		document.addEventListener('DOMContentLoaded', async () => {
			const response = await fetch('/api/work');
			const data = await response.json();
			// 更新UI
			document.getElementById('userCount').innerText = `${data.userCount}人`;
			document.getElementById('productCount').innerText = `${data.productCount}个`;
			document.getElementById('productSum').innerText = `${data.productSum}个`;
			document.getElementById('money').innerText = `${data.money}W`;
			document.getElementById('vipCount').innerText = `${data.vipCount}人`;
		});

	</script>

	<script>
		/*支付平台占比饼状图*/
		$(function() {
			var pieChart = echarts.init(document.getElementById("userPie"));
			fetch('/api/visitCounts')
					.then(response => response.json())
					.then(data => {

						var pieoption = {
							title: {
								text: '',
								x: 'center'
							},
							tooltip: {
								trigger: 'item',
								formatter: "{a} <br/>{b} : {c} ({d}%)"
							},
							legend: {
								orient: 'vertical',
								x: 'left',
								data: data.legendData
							},
							calculable: true,
							series: [{
								name: '访问量',
								type: 'pie',
								radius: '55%',
								center: ['50%', '60%'],
								data: data.data
							}]
						};
						pieChart.setOption(pieoption);
					})
						/*初始化热销商品排行榜*/
			var barChart = echarts.init(document.getElementById("coursesBar"));
			fetch('/api/getChartData')
					.then(response => response.json())
					.then(data => {
						var baroption = {
							title: {
								text: ''
							},
							tooltip: {
								trigger: 'axis'
							},
							legend: {
								data: ['访问量', '库存']
							},
							grid: {
								left: 50,
								x: 40,
								x2: 40,
								y2: 24
							},
							calculable: true,
							xAxis: [{
								axisLabel: {
									interval: 0,
									rotate: 0
								},
								data: data.categories
							}],
							yAxis: [{
								type: 'value'
							}],
							series: [
								{
									name: '访问量',
									type: 'bar',
									data: data.visits,
									markPoint: {
										data: [{ type: 'max', name: '最大值' }, { type: 'min', name: '最小值' }]
									}
								},
								{
									name: '库存',
									type: 'bar',
									data: data.stock,
									markPoint: {
										data: [{ type: 'max', name: '最大值' }, { type: 'min', name: '最小值' }]
									}
								}
							]
						};

						barChart.setOption(baroption);
					})
					.catch(error => console.error('Error fetching data:', error));
			//初始化折线图
			initWeekLine(3);
		})
		/*
		线上课程营收曲线
		 * */
		function initWeekLine(swt){
			switch(swt){
				//月度
				case 1:
					var lineChart1 = echarts.init(document.getElementById("echarts-line-chart"));
				    var lineoption1 = {
				        title : {
				        	x:'center',
				            text: '平台月度营收'
				        },
				        tooltip : {
				            trigger: 'axis'
				        },
				        grid:{
				        	left:100
				        },
				        calculable : true,
				        xAxis : [
				            {
				                type : 'category',
				                boundaryGap : false,
				                data : ['周一','周二','周三','周四','周五','周六','周日']
				            }
				        ],
				        yAxis : [
				            {
				                type : 'value',
				                axisLabel : {
				                    formatter: '{value} 人民币'
				                }
				            }
				        ],
				        series : [
				            {
				                name:'最高气温',
				                type:'line',
				                data:[11, 11, 15, 13, 12, 13, 10],
				                markPoint : {
				                    data : [
				                        {type : 'max', name: '最大值'},
				                        {type : 'min', name: '最小值'}
				                    ]
				                },
				                markLine : {
				                    data : [
				                        {type : 'average', name: '平均值'}
				                    ]
				                }
				            }
				        ]
				    };
				    lineChart1.setOption(lineoption1);
				break;			
				//年度
				case 2:
					var lineChart2 = echarts.init(document.getElementById("echarts-line-chart"));
				    var lineoption2 = {
				        title : {
				            text: '平台年度营收',
				            x:'center'
				        },
				        tooltip : {
				            trigger: 'axis'
				        },
				        grid:{
				        	left:100
				        },
				        calculable : true,
				        xAxis : [
				            {
				                type : 'category',
				                boundaryGap : false,
				                data : ['周一','周二','周三','周四','周五','周六','周日']
				            }
				        ],
				        yAxis : [
				            {
				                type : 'value',
				                axisLabel : {
				                    formatter: '{value} °C'
				                }
				            }
				        ],
				        series : [
				            {
				                name:'最高气温',
				                type:'line',
				                data:[11, 11, 15, 13, 12, 13, 10],
				                markPoint : {
				                    data : [
				                        {type : 'max', name: '最大值'},
				                        {type : 'min', name: '最小值'}
				                    ]
				                },
				                markLine : {
				                    data : [
				                        {type : 'average', name: '平均值'}
				                    ]
				                }
				            }
				        ]
				    };
				    lineChart2.setOption(lineoption2);
				break;
				case 3:
					var lineChart3 = echarts.init(document.getElementById("echarts-line-chart"));
				    var lineoption3 = {
				        title : {
				            text: '平台周度营收',
				            x:'center'
				        },
				        tooltip : {
				            trigger: 'axis'
				        },
				        grid:{
				        	left:100
				        },
				        calculable : true,
				        xAxis : [
				            {
				                type : 'category',
				                boundaryGap : false,
				                data : ['周一','周二','周三','周四','周五','周六','周日']
				            }
				        ],
				        yAxis : [
				            {
				                type : 'value',
				                axisLabel : {
				                    formatter: '{value} ￥'
				                }
				            }
				        ],
				        series : [
				            {
				                name:'最高气温',
				                type:'line',
				                data:[11000, 22200, 8000, 30000, 15000, 10000, 40000],
				                markPoint : {
				                    data : [
				                        {type : 'max', name: '最大值'},
				                        {type : 'min', name: '最小值'}
				                    ]
				                },
				                markLine : {
				                    data : [
				                        {type : 'average', name: '平均值'}
				                    ]
				                }
				            }
				        ]
				    };
				    lineChart3.setOption(lineoption3);
			}
		}
		
	</script>
</html>
